<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>在线考试</title>

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<link href="css/test.css" rel="stylesheet" type="text/css" />
<style>
.hasBeenAnswer {
	background: #5d9cec;
	color:#fff;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/layui/layui.js"></script>
<script src="js/global.js"></script>

</head>
<body>
<div id="main" class="main">
	<!--nr start-->
	<div class="test_main">
		<div class="nr_left">
			<div class="test">
				<form name="form1" id="questions" action="/houtai" method="post" onsubmit="return false;">
					<div class="test_title">
						<p class="test_time">
							<i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>
						</p>
						<font><input type="submit" id="submit_test" name="test_jiaojuan" value="交卷"></font>
					</div>
					
					
				</form>
			</div>

		</div>
		<div class="nr_right">
			<div class="nr_rt_main">
				<div class="rt_nr1">
					<div class="rt_nr1_title">
						<h1>
							<i class="icon iconfont">&#xe692;</i>答题卡
						</h1>
						<p class="test_time">
							<i class="icon iconfont">&#xe6fb;</i><b class="alt-1">01:40</b>
						</p>
					</div>
					
						<div class="rt_content">
							<div class="rt_content_tt">
								<h2>单选题</h2>
								<p>
									<span>共</span><i class="content_lit">60</i><span>题</span>
								</p>
							</div>
							<div class="rt_content_nr answerSheet">
								<ul>
									
										<li><a href="#qu_0_0">1</a></li>
									
									
								</ul>
							</div>
						</div>
					
						<div class="rt_content">
							<div class="rt_content_tt">
								<h2>多选题</h2>
								<p>
									<span>共</span><i class="content_lit">30</i><span>题</span>
								</p>
							</div>
							<div class="rt_content_nr answerSheet">
								<ul>
									
										<li><a href="#qu_1_0">1</a></li>
									
									
									
								</ul>
							</div>
						</div>
					
				</div>

			</div>
		</div>
	</div>
	<!--nr end-->
	<div class="foot"></div>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="js/jquery.countdown.js"></script>
<script>
	window.jQuery(function($) {
		"use strict";
		
		$('time').countDown({
			with_separators : false
		});
		$('.alt-1').countDown({
			css_class : 'countdown-alt-1'
		});
		$('.alt-2').countDown({
			css_class : 'countdown-alt-2'
		});
		
	});
	
	
	$(function() {
		$('li.option label').click(function() {
		debugger;
			var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
			var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
			// 设置已答题
			if(!cardLi.hasClass('hasBeenAnswer')){
				cardLi.addClass('hasBeenAnswer');
			}
			
		});
	});
</script>
<script>
	// window.onload=function(){
		
	// }
	// var main = document.getElementById("main");
	// main.style.width = window.innerWidth;
	// main.style.height = window.innerHeight;
	// // console.log();
	// // console.log();
	// document.getElementById("main").onmouseout=function(){
	// 	//alert(1);
	// }
	
	$(function(){
		//获取考试信息
		var examId = globalData.getExamId();
		var answerObjs;
		if(examId != null && examId != undefined){
			$.ajax({
				type : "get",
				url : globalData.examinationServer+"/myExam/getTestQuestions",
				async : false, //必须使用同步请求
				data:{
					'examId' : examId
				},//需要传递到服务端的数据
				dataType:'json',//服务端响应数据类型
				xhrFields: {
					withCredentials: true
				},
				// beforeSend: function(request) {
				// 	request.setRequestHeader("token", globalData.getCurToken());
				// },
				success : function(res) {
					if(res.code == 0){
						//获取题目数组
						var data = res.data;
						
						loadQuestions(data);
						
						
					}else{
						layer.msg(res.msg,{icon:2,time:2000});
					}
			}
			});
		}
		
		function loadQuestions(data){
			var html = '';
			var t = 0;
			var n = 0;
			for (var i = 0; i < data.length; i++) {
				html += '<div class="test_content">' +
					'<div class="test_content_title">' +
						'<h2>' +data[i].questionTypeName  + '</h2>' + 
						'<p>' +
							'<span>共</span><i class="content_lit">' + data[i].questions.length + '</i><span>题，</span><span>合计</span><i class="content_fs">00</i><span>分</span>' +
						'</p>' +
					'</div>' +
				'</div>';
				
				var questions = data[i].questions;
				for (var j = 0; j < questions.length; j++) {
					var question = questions[j];
					
					html += '<div class="test_content_nr">' +
						'<ul>' +
								'<li id="qu_0_0">' +
									'<div class="test_content_nr_tt">' +
										'<i>' + ++t +'</i><span>(' + question.questionScore +'分)</span><font>' + question.questionContent +'</font><b class="icon iconfont">&#xe881;</b>' +
									'</div>';
									if(data[i].questionTypeName.indexOf("单选") > -1){
										html += '<div class="test_content_nr_main">' +
													'<ul>' +
															'<li class="option">' +
																
																	'<input type="radio" class="radioOrCheck" name="'+ question.questionId +'" value="A" id="0_answer_1_option_1"/>' +
																'<label for="0_answer_1_option_' + n++ + '">' +
																	'A.' +
																	'<p class="ue" style="display: inline;">' + question.itemA + '</p>' +
																'</label>' +
															'</li>' +
														
															'<li class="option">' +
																
																	'<input type="radio" class="radioOrCheck" name="'+ question.questionId +'" value="B" id="0_answer_1_option_2"/>' +
																
																
																'<label for="0_answer_1_option_' + n++ + '">' +
																	'B.' +
																	'<p class="ue" style="display: inline;">' + question.itemB + '</p>' +
																'</label>' +
															'</li>' +
														
															'<li class="option">' +
																
																	'<input type="radio" class="radioOrCheck" name="'+ question.questionId +'" value="C" id="0_answer_1_option_3"/>' +
																
																
																'<label for="0_answer_1_option_' + n++ + '">' +
																	'C.' +
																	'<p class="ue" style="display: inline;">' + question.itemC + '</p>' +
																'</label>' +
															'</li>' +
														
															'<li class="option">' +
																
																	'<input type="radio" class="radioOrCheck" name="'+ question.questionId +'" value="D" id="0_answer_1_option_4"/>' +
																
																
																'<label for="0_answer_1_option_' + n++ + '">' +
																	'D.' +
																	'<p class="ue" style="display: inline;">' + question.itemD + '</p>' +
																'</label>' +
															'</li>' +
														
													'</ul>' +
												'</div>';
													
									}else if(data[i].questionTypeName.indexOf("多选") > -1){
										html += '<div class="test_content_nr_main">' +
													'<ul>' +
															'<li class="option">' +
																
																	'<input type="checkbox" class="radioOrCheck" name="'+ question.questionId +'" value="A" id="0_answer_1_option_1"/>' +
																'<label for="0_answer_1_option_' + n++ + '">' +
																	'A.' +
																	'<p class="ue" style="display: inline;">' + question.itemA + '</p>' +
																'</label>' +
															'</li>' +
														
															'<li class="option">' +
																
																	'<input type="checkbox" class="radioOrCheck" name="'+ question.questionId +'" value="B" id="0_answer_1_option_2"/>' +
																
																
																'<label for="0_answer_1_option_' + n++ + '">' +
																	'B.' +
																	'<p class="ue" style="display: inline;">' + question.itemB + '</p>' +
																'</label>' +
															'</li>' +
														
															'<li class="option">' +
																
																	'<input type="checkbox" class="radioOrCheck" name="'+ question.questionId +'" value="C" id="0_answer_1_option_3"/>' +
																
																
																'<label for="0_answer_1_option_' + n++ + '">' +
																	'C.' +
																	'<p class="ue" style="display: inline;">' + question.itemC + '</p>' +
																'</label>' +
															'</li>' +
														
															'<li class="option">' +
																
																	'<input type="checkbox" class="radioOrCheck" name="'+ question.questionId +'" value="D" id="0_answer_1_option_4"/>' +
																
																
																'<label for="0_answer_1_option_' + n++ + '">' +
																	'D.' +
																	'<p class="ue" style="display: inline;">' + question.itemD + '</p>' +
																'</label>' +
															'</li>' +
														
													'</ul>' +
												'</div>';
										
									}else if(data[i].questionTypeName.indexOf("简答") > -1||data[i].questionTypeName.indexOf("论述") > -1){
										html += '<div class="test_content_nr_main">' +
													'答：<textarea style="width:700px;height:200px;" name="'+ question.questionId +'" id="0_answer_1_option_1"></textarea>' +
												'</div>';
									}
									
					html += '</li>' +
						'</ul>' +
					'</div>';
									
				}
				
			}
			$("#questions").append(html);
		}
		
		
		//提交考试
		$("#submit_test").click(function(){
			
			var flag = 0;
			//遍历所有表单元素
			// for(var i=0;i<document.form1.elements.length-1;i++)
			// {//判断所有表单值是否为空
			//  if(document.form1.elements[i].value=="")
			//  {
			// 	 console.log(document.form1.elements[i]);
			//    alert("当前表单不能有空项");
			//    //将光标定位在空表单处
			//    document.form1.elements[i].focus();
			//    return false;
			//  }
			 
			// }
			// return false;
			
			
			answerObjs = [];
			//单选
			var radio = $("input[type='radio']");
			var answer;
			for(var i = 0; i< radio.length; i++){
				if(radio[i].checked){
					answer = {};
					answer.id = radio[i].name;
					answer.value = radio[i].value;
					answerObjs.push(answer);
				}
			}
			//多选
			var checkbox = $("input[type='checkbox']");
			for(var i = 0; i< checkbox.length; i++){
				if(checkbox[i].checked){
					console.log(checkbox[i]);
					
					//找到该题的答案对象的下标
					let answerIndex = answerObjs.findIndex(item => item.id == checkbox[i].name);
					console.log(answerIndex);
					//如果数组中存在该题的答案
					if(answerIndex > -1){
						//使用||符号分割多选
						answerObjs[answerIndex].value = answerObjs[answerIndex].value + "||" + checkbox[i].value;
						
					}else{
						answer = {};
						answer.id = checkbox[i].name;
						answer.value = checkbox[i].value;
						answerObjs.push(answer);
					}
					
				}
			}
			//简答
			var textarea = $("textarea");
			for (var i = 0; i < textarea.length; i++) {
				if(textarea[i].value == ""){
					alert("你还有题目未答！");
					flag = 1;
					return ;
				}
				answer = {};
				answer.id = textarea[i].name;
				answer.value = textarea[i].value;
				answerObjs.push(answer);
				
			}
			
			if(flag == 0 && answerObjs != undefined){
				//answerObjs.examId = examId;
				var testDTO = {
					'userId' : globalData.getCurUserId(),
					'examId' : examId,
					'answerDTOs' : answerObjs
				};
				//提交试卷
				$.ajax({
					type : "post",
					url : globalData.examinationServer+"/myExam/submitExam",
					async : false, //必须使用同步请求
					data : JSON.stringify(testDTO),//需要传递到服务端的数据
					dataType:'json',//服务端响应数据类型
					contentType:"application/json",
					xhrFields: {
						withCredentials: true
					},
					// beforeSend: function(request) {
					// 	request.setRequestHeader("token", globalData.getCurToken());
					// },
					success : function(res) {
						if(res.code == 0){
							
							alert(res.msg);
							window.history.back(-1);
							//layer.msg(res.msg,{icon:1,time:2000});
							
							
						}else{
							alert(res.msg);
							//layer.msg(res.msg,{icon:2,time:2000});
						}
				}
				});
			}
			console.log(answerObjs);
		})
		
	})
	
	
	
</script>


</body>
</html>
